<template>
  <div class="common-layout">
    <el-container class="home-layout">
      <!-- 头部区域 -->
      <el-header>
        <el-row>
          <el-col :span="3">
            <a href="http://127.0.0.1:5173/home" class="logo">
              <div class="logo_title">VideosTV</div>
            </a>
          </el-col>
          <el-col :span="7">
            <el-menu
              :default-active="activeIndex"
              background-color="#303133"
              text-color="#b1b3b8"
              active-text-color="#b1b3b8"
              mode="horizontal"
              popper-effect="dark"
              @select="handleSelect"
            >
              <el-menu-item index="0">首页</el-menu-item>
              <el-menu-item index="1">动漫</el-menu-item>
              <el-menu-item index="2">电影</el-menu-item>
              <el-sub-menu index="3">
                <template #title>电视剧</template>
                <el-menu-item index="3-1">大陆</el-menu-item>
                <el-menu-item index="3-2">美剧</el-menu-item>
                <el-menu-item index="3-3">韩剧</el-menu-item>
                <el-menu-item index="3-4">日剧</el-menu-item>
                <el-sub-menu index="4-5">
                  <template #title>其他</template>
                  <el-menu-item index="4-5-1">泰剧</el-menu-item>
                  <el-menu-item index="4-5-2">英剧</el-menu-item>
                  <el-menu-item index="4-5-3">港台</el-menu-item>
                </el-sub-menu>
              </el-sub-menu>
            </el-menu>
          </el-col>
          <el-col :span="6">
            <el-input
              v-model="input"
              class="search"
              size="large"
              placeholder="Please Input"
              :suffix-icon="Search"
            />
          </el-col>
          <el-col :span="4"></el-col>
          <el-col :span="4">
            <div class="userbox">
              <el-row>
                <el-col :span="8">
                  <el-button
                    v-if="loginState"
                    class="logout"
                    type="info"
                    @click=""
                    >登录</el-button
                  >
                  <el-button v-else class="logout" type="info" @click="logout"
                    >退出</el-button
                  >
                </el-col>
                <el-col :span="6">
                  <a href="javascript:;" class="icon_container">
                    <Clock class="icon" />
                    <span class="icon_title">历史</span>
                  </a>
                </el-col>
                <el-col :span="6">
                  <a href="javascript:;" class="icon_container">
                    <Message class="icon" />
                    <span class="icon_title">消息</span>
                  </a>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <!-- 页面主题区域 -->
      <el-main>
        <ul class="content_box">
          <li class="content">
            <div class="card_description">
              <a class="tag">动漫</a>
              <h2 class="video_title">咒术回站0</h2>
            </div>
          </li>
          <li class="content">
            <div class="card_description">
              <a class="tag">动漫</a>
              <h2 class="video_title">咒术回站0</h2>
            </div>
          </li>
          <li class="content">
            <div class="card_description">
              <a class="tag">动漫</a>
              <h2 class="video_title">咒术回站0</h2>
            </div>
          </li>
          <li class="content">
            <div class="card_description">
              <a class="tag">动漫</a>
              <h2 class="video_title">咒术回站0</h2>
            </div>
          </li>
          <li class="content">
            <div class="card_description">
              <a class="tag">动漫</a>
              <h2 class="video_title">咒术回站0</h2>
            </div>
          </li>
          <li class="content">
            <div class="card_description">
              <a class="tag">动漫</a>
              <h2 class="video_title">咒术回站0</h2>
            </div>
          </li>
          <li class="content">
            <div class="card_description">
              <a class="tag">动漫</a>
              <h2 class="video_title">咒术回站0</h2>
            </div>
          </li>
          <li class="content">
            <div class="card_description">
              <a class="tag">动漫</a>
              <h2 class="video_title">咒术回站0</h2>
            </div>
          </li>
        </ul>
        <div class="page">
          <el-pagination background layout="prev, pager, next" :total="50" />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Search } from "@element-plus/icons-vue";

const router = useRouter();

const activeIndex = ref("0");
// 登录状态
let loginState = window.sessionStorage.getItem("token") ? false : true;

const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};

const input = ref("");
// 登出按钮
const logout = () => {
  window.sessionStorage.clear();
  router.push("/login");
};
</script>

<style lang="less" scoped>
.common-layout,
.home-layout {
  height: 100%;
  background-color: #303133;
  color: #f4f4f5;
}

.el-header {
  align-items: center;
  color: #f4f4f5;
  font-size: 25px;
}
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #f4f4f5;
}
.el-menu {
  background-color: #303133;
  border: none;
}
.el-menu-item.is-active {
  background-color: #303133 !important;
}
.el-menu-item:hover {
  background-color: #606266 !important;
}
.search {
  margin: 10px 0;
}
.userbox {
  height: 100%;
}
.el-row {
  height: 100%;
}
.logout {
  margin: 14px 15px;
}
.icon_container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.icon {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
}
.icon_title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 30%);
  font-size: 15px;
}
.el-main {
  background-color: #73767a;
}
.el-main .content_box {
  overflow: hidden;
  width: 100%;
  // margin-bottom: 100px;
}
li.content {
  position: relative;
  overflow: hidden;
  float: left;
  width: 21%;
  height: 400px;
  margin-right: 5.333%;
  margin-bottom: 50px;
  background: #f00 url("/admin/images/咒术回站0.jpg") no-repeat center / cover;
  box-shadow: 0 15px 30px #606266;
  cursor: pointer;
}
li.content:nth-child(4n) {
  margin-right: 0;
}
li.content:hover .card_description {
  background-color: rgba(115, 118, 122, 0.75);
}
.video_card {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.card_description {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 130px;
  padding-left: 20px;
  background-color: rgba(115, 118, 122, 0.25);
  box-shadow: 0 -10px 5px rgba(115, 118, 122, 0.25);
  transition: all 0.4s;
}
.tag {
  padding-top: 10px;
  padding-left: 5px;
  color: #2ebf8b;
}
.video_title {
  margin-top: 50px;
}
.page {
  position: relative;
  // overflow: hidden;
  height: 42px;
}
.el-pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
</style>

<style lang="less">
.is-light {
  border: none !important;
}

.el-menu--horizontal {
  border-bottom: none !important;
}
// 分页栏的背景，可能会影响到后台的页面
div.page .el-pagination.is-background .btn-next.is-active,
div.page .el-pagination.is-background .btn-prev.is-active,
div.page .el-pagination.is-background .el-pager li.is-active {
  background-color: #303133;
}
div.page .el-pagination.is-background .btn-next:hover,
div.page .el-pagination.is-background .btn-prev:hover,
div.page .el-pagination.is-background .el-pager li:hover {
  color: #b1b3b8;
}
</style>
